<template>
    <div class="merchant-page">

      <el-form>
          <el-form-item label="商户号：">
              <el-input placeholder="请输入商户号" v-model="searchForm.phone" size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="邀请码/人：">
              <el-input placeholder="邀请码或者邀请码备注" v-model="searchForm.inviteCode" size="small" clearable></el-input>
          </el-form-item>
           <el-form-item label="微信号：">
              <el-input placeholder="请输入微信号" v-model="searchForm.weChat" size="small" clearable></el-input>
          </el-form-item>
           <el-form-item label="QQ号：">
              <el-input placeholder="请输入QQ号" v-model="searchForm.qq" size="small" clearable></el-input>
          </el-form-item>
          <el-form-item label="余额：">
              <el-input placeholder="请输入最低余额" v-model="searchForm.startMoney" size="small" clearable style="width: 150px;"></el-input>
              ~
               <el-input placeholder="请输入最高余额" v-model="searchForm.endMoney" size="small" clearable style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="冻结余额：">
              <el-input placeholder="请输入最低冻结余额" v-model="searchForm.startFreezeMoney" size="small" clearable style="width: 180px;"></el-input>
              ~
               <el-input placeholder="请输入最高冻结余额" v-model="searchForm.endFreezeMoney" size="small" clearable style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
              <el-select v-model="searchForm.status" placeholder="请选择状态" size="small">
                   <el-option  label="全部" value=""></el-option>
                   <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="注册时间 ：">
              <div class="block">
             <el-date-picker size="small" v-model="searchTime" type="datetimerange" @change="changeTime" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期"
               end-placeholder="结束日期"></el-date-picker>
              </div>
          </el-form-item>
         <el-form-item>
             <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
         </el-form-item>

      </el-form>

      <el-table class="tableDiv" :data="tableData" border @cell-click="cellClick">
         <el-table-column prop="phone" label="商户号"></el-table-column>
         <!-- <el-table-column prop="promoter_phone" label="推广员"></el-table-column> -->
         <!-- <el-table-column prop="discount"  label="当前折扣"></el-table-column> -->
         <el-table-column prop="we_chat" label="微信号"></el-table-column>
         <el-table-column prop="qq" label="QQ号"></el-table-column>
         <el-table-column prop="money" label="余额"></el-table-column>
         <el-table-column prop="freeze_money" label="冻结余额"></el-table-column>
         <el-table-column prop="create_time" label="注册时间"></el-table-column>
         <el-table-column prop="last_login_time" label="最近登录时间"></el-table-column>
         <el-table-column prop="address" label="登录地址"></el-table-column>
         <el-table-column prop="status" :formatter="getStatusText" label="当前状态"></el-table-column>
         <el-table-column prop="remark" label="备注">
           <template slot-scope="scope">
             <el-input size="small" v-model="scope.row.remark" @blur="removeClass" @change="handleEdit(scope.row.remark, scope.$index, scope.row)"></el-input>
             <span>{{ scope.row.remark }}</span>
           </template>
         </el-table-column>
         <el-table-column label="登录商户">
             <template slot-scope="scope">
                 <el-button type="success" icon="el-icon-login" @click="forceLogin(scope.row)">登 录</el-button>
             </template>
         </el-table-column>
      </el-table>

      <div class="block" style="margin: 20px 0px; text-align: right;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
         :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </div>

    </div>

</template>
<script>
import { apiMechantList, apiMerchantEditRemark } from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    phone: '',
                    inviteCode: '',
                    pageSize: 10,
                    page: 1,
                    status: '',
                    codeType: 1,
                    token: window.sessionStorage.getItem("token"),
                    createTime: '',
                    qq: '',
                    startMoney: '',
                    endMoney: '',
                    startFreezeMoney: '',
                    weChat: '',

                    endFreezeMoney: '',

                },
                statusData: [{
                    id: 1,
                    name: '启用'
                },{
                    id: 2,
                    name: '禁用'
                }],
                pageTotal: 0,
                searchTime: []
            }
        },
        created () {
            this.getTableData()
        },
        methods:{
            cellClick(row, column, cell, event){
              for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
                document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
              }
              cell.classList.add("current-cell");
            },
            removeClass(){
              document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
            },
            handleEdit(remark,index,row) {
              apiMerchantEditRemark({
                token: window.sessionStorage.getItem("token"),
                'remark': remark,
                'remarkType': 1,
                'promoterMerchantId': row.id
              }).then(res =>{

              }).catch(res => {

              })
            },
            getStatusText(row){
                for (var i in this.statusData) {
                    if(this.statusData[i].id == row.status)
                    {
                        return this.statusData[i].name
                    }

                }
            },
            getTableData (){
                apiMechantList(this.searchForm).then(res =>{
                    this.tableData = res.msg.res
                    this.pageTotal = res.msg.con
                }).catch(res => {

                })
            },
            forceLogin(data){
                console.log(data['url']);
                window.open(data['url']);
                // var rdata = [];
                // rdata['id'] = data['id'];
                // rdata['phone'] = data['phone'];
                // console.log(rdata);
                // apiMechantLogin(rdata).then(res =>{
                //     console.log('succ：'+res);
                // }).catch(res => {
                //     console.log('fail：'+res);
                // })
                // apiMechantList(this.searchForm).then(res =>{
                //
                //     console.log(res.msg.con);
                // }).catch(res => {
                //
                // })
            },
            searchData(){
                this.getTableData()
            },
            handleSizeChange(val){
                this.searchForm.pageSize = val;
      	        this.getTableData()
            },
            handleCurrentChange(val){
                this.searchForm.page = val;
      	        this.getTableData()
            },
            changeTime(val){
                 if (this.searchTime == null) {
                     this.searchForm.createTime = ''
                } else{
                    this.searchForm.createTime =  this.changeTimestamp(val[0]) + ' - ' +  this.changeTimestamp(val[1])

                }
            },
            changeTimestamp(time){
               var date = new Date(time)
               var Y = date.getFullYear() + '-';
               var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
               var D = (date.getDate() < 10 ? '0' +  date.getDate() : date.getDate()) + ' ';
               var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
               var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
               var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
               return Y + M + D + h + m + s;
            },
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.tableDiv .el-input {
  display: none;
}
.current-cell .el-input {
  display: block;
}
.current-cell .el-input + span {
  display: none;
}
</style>
